<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    /* 头部导航样式 */
    /*#region*/
    .headbox {
      position: relative;
      z-index: 2000;
      width: 100%;
      height: 35px;
      background-color: #f5f5f5;
    }

    .headcontent {
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      width: 1460px;
      /* background-color: skyblue; */
      font-size: 12px;
      height: 35px;
      line-height: 35px;
    }

    .headcity {
      color: #333;
    }

    .headcity span {
      color: #0cbab2;
    }

    .headcity img {
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }

    .headnav ul {
      display: flex;
    }

    .headnav ul li a {
      color: #999;
      padding: 0 10px 0 14px;
      border-right: 1px solid #999;
    }

    .headnav ul li img {
      width: 12px;
      height: 8px;
    }

    .headnav ul li a:hover {
      position: relative;
      color: #0cbab2;
    }

    .headnav ul li a div {
      color: #999;
      /* text-align: center; */
      display: none;
      padding-left: 15px;
      position: absolute;
      width: 100px;
      height: 90px;
      background-color: #f5f5f5;
      z-index: 100;
    }

    .headnav ul li a:hover div {
      display: block;
    }

    .headnav .li1 a:first-child {
      border: 0;
    }

    .headnav ul>li:last-child a {
      border: 0;
      color: red;
    }

    .headnav ul>li:last-child a span {
      text-decoration: underline;
    }

    /*#endregion*/

    /* logo位置导航栏 */
    /*#region*/
    .logonav {
      position: sticky;
      top: 0;
      z-index: 1000;
      background-color: #fff;
      width: 100%;
      height: 80px;
      /* background-color: skyblue; */
    }

    .logonavcontent {
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      width: 1460px;
      height: 80px;
      /* background-color: #0cbab2; */
    }

    .logobox {
      display: flex;
      justify-content: space-between;
      width: 289px;
      height: 51px;
      margin-top: 16px;
    }

    .logobox i {
      width: 132px;
      height: 47px;
    }

    .logobox i {
      margin-top: 4px;
      background: url(images/jlt.png) no-repeat 0 -261px;
      /* background-image: url(images/jlt.png);
      background-repeat: no-repeat; */
      background-size: 457px 370px;
      /* background-position: 0 -208px; */
      /* background-size: 2; */
      zoom: 1;
    }

    .logobox img {
      vertical-align: middle;
      width: 145px;
      height: 51px;
    }

    .logonavmain,
    .logonavmain ul {
      display: flex;
      width: 766px;
      height: 80px;
    }

    .logonavmain ul li {
      padding: 22px 15px 0 16px;
      margin-right: 30px;
    }

    .logonavmain ul li:last-child {
      margin-right: 0;
    }

    .logonavmain ul li a {
      font-size: 16px;
      height: 38px;
      line-height: 38px;
      color: #333;
    }

    .logonavmain ul li a img {
      margin-left: 5px;
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }

    .logonavmain ul li a div {
      left: 0;
      bottom: -200px;
      color: #999;
      display: none;
      padding-left: 15px;
      box-sizing: border-box;
      position: absolute;
      width: 1519px;
      height: 200px;
      background-color: #f5f5f5;
      z-index: 100;
    }

    .logonavmain ul li:first-child a {
      color: #0cbab2;
    }

    .logonavmain ul li a:hover {
      color: #0cbab2;
    }

    .logonavmain ul li a:hover div {
      display: block;
    }

    .logosearch {
      position: relative;
      width: 268px;
      height: 79px;
      line-height: 79px;
    }

    .logosearch input {

      width: 224px;
      height: 14px;
      padding: 9px 32px 9px 8px;
      outline: none;

    }

    .logosearch img {
      right: 10px;
      top: 30px;
      width: 21px;
      height: 21px;
      position: absolute;
    }

    /*#endregion*/

    /* 轮播图 */
    /*#region*/
    .swiper {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 460px;
    }

    .swiperimg {
      display: flex;
      font-size: 0;
      width: 300%;
      height: 460px;
      animation: swipermove 10s linear infinite;
    }

    .swiperimg img {
      position: relative;
      z-index: 100;
      width: 1920px;
      height: 460px;
    }

    .swiperimg .imgg {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 2600px;
      height: 460px;
      z-index: 10;
    }

    .swiperimg a {
      position: relative;
      display: block;
      overflow: hidden;
      width: 33.33333%;
      height: 460px;
    }

    @keyframes swipermove {

      0%,
      20% {
        transform: translateX(0);
      }

      40%,
      60% {
        transform: translateX(-33.33333%);
      }

      80%,
      100% {
        transform: translateX(-66.66666%);
      }
    }

    .login {
      width: 330px;
      height: 372px;
      background-color: #fff;
      position: absolute;
      top: 50px;
      left: 25px;
    }

    .login h3 {
      text-align: center;
      width: 330px;
      height: 31px;
      margin-top: 32px;
      font-size: 24px;
    }

    .login p {
      height: 20.8;
      margin: 8px 0 36px;
      font-size: 16px;
      text-align: center;
      color: orange;
    }

    .unit {
      position: relative;
      width: 274px;
      height: 44px;
      margin: 12px 28px 0;
    }

    .unit input {
      width: 200px;
      height: 21px;
      padding: 12px 60px 10px 14px;
      background-color: #F7F7F7;
      border: 0;
      color: #333;
    }

    .unit span {
      top: 7px;
      right: 10px;
      position: absolute;
    }

    .unit span sup {
      font-size: 12px;
    }

    .agree {
      width: 302px;
      height: 18px;
      padding-left: 28px;
      margin-top: 12px;
      font-size: 12px;
    }

    .getprice {
      display: block;
      width: 274px;
      height: 44px;
      background-color: #52B16E;
      margin: 0 auto;
      line-height: 44px;
      text-align: center;
      margin-top: 12px;
      color: white;
    }

    .login .wran {
      width: 330px;
      height: 18px;
      margin-top: 16px;
      font-size: 12px;
      color: #999;
    }

    /*#endregion*/
    /* 展示功能 */
    /*#region*/
    .showfunction {
      width: 100%;
      height: 140px;
      padding: 20px 0;
      background-color: #f5f5f5;
    }

    .showfunction .showlist {
      display: flex;
      margin: 0 auto;
      width: 1460px;
      height: 140px;

    }

    .showfunction .showlist li:first-child {
      margin-left: 0;
    }

    .showfunction .showlist li {
      background-color: #fff;
      width: 276px;
      height: 140px;
      margin-left: 20px;
    }

    .showfunction .showlist li:hover {
      transform: translate3d(0, -2px, 0);
      box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
    }

    .showfunction .showlist li a {
      display: flex;
      justify-content: space-between;
      width: 230px;
      height: 64px;
      padding: 38px 23px;
      color: #333;
    }

    .showfunction .showlist li a span {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;
    }

    .showfunction .showlist li a span h5 {
      font-size: 24px;
    }

    .showfunction .showlist li a span p {
      font-size: 14px;
    }

    .showfunction .showlist li a div {
      width: 80px;
      position: relative;
    }

    .showfunction .showlist li a div img {
      width: 80px;
      height: 85px;
      vertical-align: middle;
      position: absolute;
      top: -10px;
      left: 0;
    }

    /*#endregion*/

    /* 公司展示 */
    /*#region*/
    .showcompanybig {
      margin-top: 90px;
      width: 100%;
      height: 1060px;
    }

    .showcompany {
      margin: 0 auto;
      width: 1460px;
      height: 1060px;
    }

    .showcompanytitle {
      width: 1460px;
      height: 158px;
    }

    .showcompanytitle h2 {
      font-weight: 500;
      text-align: center;
      height: 45px;
      line-height: 45px;
      font-size: 42px;
    }

    .showcompanytitle div {
      display: flex;
      width: 198px;
      height: 35px;
      border: 1px solid #ccc;
      margin: 26px auto;
      margin-bottom: 50px;
    }

    .showcompanytitle div span {
      cursor: pointer;
      color: #0cbab2;
      display: block;
      border-right: 1px solid #ccc;
      width: 99px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      font-size: 14px;
    }

    .showcompanytitle div span:last-child {
      border-right: 0;
      color: #333;
    }

    .showcompany .showcompanylist {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 1460px;
      height: 800px;
      /* background-color: #ccc; */
    }

    .showcompanylist .showcompanyitem {
      width: 350px;
      height: 380px;
      /* background-color: skyblue; */
      transition: all .3s;
    }

    .showcompanylist .showcompanyitem:hover {
      transform: translateY(-4px);
      box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
    }

    .showcompanylist .showcompanyitem:hover .companyimg {
      background-size: 400px;
      background-position: center;
    }

    .showcompanyitem .companyimg {
      width: 350px;
      height: 240px;
      background: url(images/companylist1.jpg) no-repeat;
      background-size: 350px 240px;
    }

    .showcompanyitem .companycontent {
      width: 308px;
      height: 99px;
      padding: 20px;
      border: 1px solid #ccc;
    }

    .showcompanyitem .companycontent p {
      margin-top: 14px;
    }

    .showcompanyitem .companycontent h2 {
      display: flex;
      align-items: center;
      font-size: 20px;
      color: #333;
      font-weight: 600;
      margin-right: 4px;
    }

    .showcompanyitem .companycontent h2 span {
      display: inline-block;
      width: 18px;
      height: 18px;
      margin-left: 6px;
      font-size: 12px;
      background-color: orange;
      color: white;
      text-align: center;
      line-height: 18px;
    }

    .showcompanyitem .companycontent h2 span:last-child {
      background-color: rgb(141, 42, 42);
    }

    .showcompanyitem .companycontent p img {
      width: 74px;
      height: 14px;
    }

    .morecompany {
      display: block;
      width: 177px;
      height: 40px;
      border: 1px solid #ccc;
      margin: 60px auto;
      line-height: 40px;
      text-align: center;
      color: #333;
    }

    /*#endregion*/

    /* 用户的评价 */
    /*#region*/
    .evaluation {
      position: relative;
      width: 100%;
      height: 600px;
      background-color: #ccc;
      margin-top: 50px;
    }

    .bgimgleft {
      position: absolute;
      left: 0;
      top: 0;
      width: 1152px;
      height: 600px;
    }

    .bgimgleft img {
      width: 1152px;
      height: 600px;
    }

    .bgimgright {
      position: absolute;
      right: 0;
      top: 0;
      width: 804px;
      height: 600px;
      z-index: 101;
    }

    .bgimgright img {
      width: 804px;
      height: 600px;
    }

    .rightnode {
      width: 490px;
      height: 479px;
      position: absolute;
      left: 50px;
      top: 50px;
      color: white;
      font-size: 18px;
    }

    .rightnode h6 {
      font-size: 30px;
      margin-bottom: 14px;
    }

    .rightnode p {
      margin-bottom: 7px;
    }

    .rightnode ul {
      display: flex;
      flex-wrap: wrap;
      margin-top: 35px;
    }

    .rightnode ul li,
    .rightnode ul li img {
      width: 74px;
      height: 74px;
    }

    .rightnode ul li {
      border: 2px solid skyblue;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 34px 30px 0;
    }

    .evaluationcontent {
      width: 1460px;
      height: 600px;
      margin: 0 auto;
    }

    .usercontentinfo {
      position: relative;
      /* z-index: 100; */
      top: 75px;
      display: block;
      width: 600px;
      height: 415px;
      padding: 35px 60px 0;
      background-color: #fff;
    }

    .usercontentinfo .userinfo {
      height: 80px;
      width: 600px;
    }

    .usercontentinfo .userinfo img {
      display: block;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      float: left;
    }

    .usercontentinfo .userinfo p:nth-of-type(1) {
      margin: 17px 0 0 19px;
      font-size: 22px;
      float: left;
    }

    .usercontentinfo .userinfo p {
      color: #333;
      width: 496px;
    }

    .usercontentinfo .userinfo p:nth-of-type(2) {
      margin: 3px 0 0 19px;
      float: left;
      color: #999;
    }

    .usercontentinfo .usercommentcontent {
      color: #666;
      margin-top: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 14px;
    }

    .commentimgbox {
      height: 195px;
      margin: 26px 0 0 0;
    }

    .commentimgbox img {
      width: 290px;
      height: 195px;
    }

    .commentimgbox img:last-child {
      margin-left: 20px;
    }

    /*#endregion*/

    /* 服务流程 */
    /*#region*/
    .serviceprocess {
      width: 1460px;
      height: 385px;
      /* background-color: skyblue; */
      margin: 72px auto 0;
    }

    .serviceprocesstop {
      height: 305px;
      padding-bottom: 80px;
    }

    .serviceprocesstop h4 {
      font-size: 30px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      color: #333;
      font-weight: 500;
    }

    .processlistbox {
      height: 188px;
      margin-top: 72px;
    }

    .processlistbox .processlist {
      height: 127px;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .processlistbox .processlist li {
      height: 127px;
      text-align: center;
    }

    .processlistbox .processlist li i {
      /* display: flex; */
      display: block;
      background: url(images/index_bg_l.png) no-repeat;
      margin: 0 auto;
      background-size: 620px 325px;
      margin-top: 6px;
    }

    .processlistbox .processlist li:nth-of-type(odd) i {
      width: 48px;
      height: 60px;
      background-position: -452px 0;
    }

    .processlistbox .processlist li:nth-child(even) i {
      width: 64px;
      height: 60px;
      background-position: -448px -54px;
    }

    .processlistbox .processlist li p:nth-of-type(1) {
      margin-top: 16px;
    }

    .processlistbox .processlist li p:nth-of-type(2) {
      margin-top: 3px;
    }

    .processlistbox .processlist li {
      margin-left: 84px;
    }

    .processlistbox .processlist li:first-child {
      margin-left: 5px;
    }

    .processlistbox .step {
      display: flex;
      width: 1460px;
      height: 33px;
      margin: 28px auto 0;

    }

    .stepimg {
      display: flex;
      margin-left: 5px;
    }

    .stepimg:nth-of-type(1) {
      margin-left: 25px;
    }

    .stepimg i {
      width: 33px;
      height: 33px;
      background: url(images/step.png);
      display: block;
      font-style: normal;
      text-align: center;
      line-height: 33px;
    }

    .step .stepimg>span:nth-of-type(1) {
      display: block;
      width: 186px;
      height: 1px;
      margin: 16px 0 0 5px;
      background-color: #ccc;
    }

    /*#endregion*/

    /* 装修效果图 */
    /* #region */
    .render,
    .strategy {
      padding: 90px 0 15px 0;
      background-color: #f5f5f5;
    }

    .strategy {
      background-color: #fff;
    }

    .renderhead,
    .strategyhead {
      position: relative;
    }

    .renderhead h4,
    .strategyhead h4 {
      font-size: 42px;
      line-height: 45px;
      text-align: center;
      font-weight: 500;
    }

    .renderhead p,
    .strategyhead p {
      margin-top: 15px;
      padding: 6px 0;
      font-size: 18px;
      text-align: center;
      color: #999;
    }

    .renderhead span,
    .strategyhead span {
      width: 57px;
      height: 1px;
      display: block;
      background-color: #ccc;
      position: absolute;
    }

    .renderhead span:nth-of-type(1),
    .strategyhead span:nth-of-type(1) {
      top: 24px;
      left: 33%;
    }

    .renderhead span:nth-of-type(2),
    .strategyhead span:nth-of-type(2) {
      top: 24px;
      right: 33%;
    }

    .navbar {
      padding: 44px 0 54px 0;
      display: flex;
      justify-content: center;
    }

    .navbar li a {
      font-size: 18px;
      color: #333;
    }

    .navbar li span {
      padding: 0 18px;
    }

    .renderimglist {
      display: flex;
      flex-wrap: wrap;
    }

    .renderimgitem {
      margin-right: 8px;
      overflow: hidden;
      width: 380px;
      height: 380px;
    }

    .renderimgitem img {
      width: 506px;
      margin-left: -62px;
    }

    .renderimgitem1 {
      margin-right: 9px;
      overflow: hidden;
      width: 550px;
      height: 262px;
    }

    .renderimgitem1 img {
      width: 550px;
      margin-top: -75px;
    }

    .renderimgitem2 {
      overflow: hidden;
      width: 570px;
      height: 364px;
    }

    .renderimgitem2 img {
      width: 570px;
      margin-top: -32px;
    }

    .renderimgitem3 {
      margin-right: 8px;
      margin-top: 10px;
      overflow: hidden;
      width: 380px;
      height: 248px;
    }

    .renderimgitem3 img {
      width: 380px;
    }

    .renderimgitem4 {
      margin-right: 9px;
      margin-top: -108px;
      overflow: hidden;
      width: 550px;
      height: 366px;
    }

    .renderimgitem4 img {
      width: 550px;
    }

    .renderimgitem5 {
      margin-top: -7px;
      overflow: hidden;
      width: 570px;
      height: 264px;
    }

    .renderimgitem5 img {
      width: 570px;
    }

    .renderimglist .item:hover img {
      transition: all .5s;
      transform: scale(1.2);
    }

    /*#endregion*/

    /* 攻略 */
    /*#region*/
    .strategycontent {
      display: flex;
      justify-content: center;
      height: 550px;
      padding: 0 20px;
      margin-top: 87px;
    }

    .strategyitem {
      position: relative;
      width: 348px;
      height: 488px;
      border: 1px solid rgba(204, 204, 204, 0.589);
    }

    .strategyitem .itemtop {
      height: 168px;
      border-top: 1px solid #ccc;
      background-color: #f6f6f6;
    }

    .strategyitem .itemtop span {
      height: 36px;
      box-sizing: border-box;
      position: relative;
      display: block;
      margin-top: 101px;
      font-size: 24px;
      text-align: center;
    }

    .strategyitem .itemtop span i {
      position: absolute;
      display: block;
      background: url(images/index_bg_l\ \(1\).png) no-repeat;
      background-position: 0 0;
      background-size: 620px 365px;
      top: -63px;
      left: 50%;
      margin-left: -24px;
      width: 48px;
      height: 50px;

    }

    .strategyitem ul {
      margin-top: 39px;
    }

    .strategyitem ul li {
      padding-left: 50px;
      line-height: 36px;
      height: 36px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .yjt {
      display: block;
      position: absolute;
      width: 29px;
      height: 25px;
      background: url(images/index_bg_l.png) no-repeat;
      background-size: 620px 365px;
      background-position: 0 -224px;
      bottom: 30px;
      right: 30px;
    }

    .strategyitem:hover {
      cursor: pointer;
      transform: translateY(-15px);
      transition: all .5s;
      box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
    }

    /*#endregion*/


    .rabbit {
      width: 1460px;
      height: 60px;
      margin: 40px auto 0;
    }

    /* 建材 */

    /*#region*/
    .jiancailist {
      display: flex;
      justify-content: space-between;
      width: 1460px;
      height: 358px;
      margin: 0 auto;
    }

    .jiancaiitem {
      padding-top: 30px;
      box-sizing: border-box;
      text-align: center;
      width: 480px;
      height: 358px;
      margin-right: 10px;
      background-color: skyblue;
      background: url(images/jiancai1.png) no-repeat;
      background-size: 480px 358px;
    }

    .jiancaiitem h4 {
      margin: 0px 0 15px 0;
      font-weight: 500;
      font-size: 30px;
      color: #333;
    }

    .jiancaiitem p {
      font-size: 18px;
      margin-top: 18px;
    }

    .jiancaiitem2 {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: none;
      width: 480px;
      height: 358px;
    }

    .jiancaiitem2 div {
      padding: 50px 0 0 20px;
      box-sizing: border-box;
      width: 480px;
      height: 175px;
      background: url(images/jiancairight1.png) no-repeat;
      background-size: 480px 175px;
    }

    .jiancaiitem2 div span {
      font-size: 26px;
    }

    .jiancaiitem:hover {
      transition: all .3s;
      background-size: 500px 374px;
      background-position: center;
    }

    .jiancaiitem2 div:hover {
      transition: all .3s;
      background-size: 500px 188px;
      background-position: center;
    }

    /*#endregion*/

    /* 其他 */
    /*#region*/
    .logolist {
      width: 1460px;
      height: 110px;
      margin-top: 20px;
      padding-bottom: 100px;
    }

    .logolist ul {
      display: flex;
    }

    .logolist ul li {
      position: relative;
      width: 244px;
      height: 110px;
    }

    .logolist ul li img {
      width: 243px;
      height: 110px;
    }

    .logolist ul li span {
      display: block;
      width: 1px;
      height: 20px;
      background-color: #ccc;
      position: absolute;
      top: 45%;
      right: 0;
    }

    .render {
      background-color: #fff;
    }

    .bottombg {
      height: 220px;
      background: url(images/bottombg.jpg) no-repeat;
      background-size: auto 220px;
    }

    .bottomcontent {
      position: relative;
      color: white;
      display: flex;
      width: 1460px;
      height: 220px;
      margin: 0 auto;

    }

    .bottomcontent img {
      width: 148px;
    }

    .bottomcontent .text {
      padding-top: 50px;
      margin-left: 20px;
    }

    .bottomcontent .text p:nth-of-type(1) {
      font-weight: 600;
      font-size: 26px;
    }

    .bottomcontent .text p:nth-of-type(2) {
      font-size: 20px;
    }

    .bottomright,
    .bottomright img {
      width: 708px;
      height: 73px;
    }

    .bottomright {
      position: absolute;
      right: 0;
      top: 50px;
    }

    .bottom {
      color: #828789;
      background-color: #1f1f1f;
      padding: 30px 0;
    }

    .bottom .ul1 {
      display: flex;
      height: 35px;
    }

    .bottommain,
    .bottomcompany {
      width: 1460px;
      margin: 0 auto;
    }

    .bottom .ul1 li {
      width: 90px;
      height: 35px;
      line-height: 35px;
      margin-right: 10px;
      background-color: #384144;
      color: #828789;
      text-align: center;
    }

    .bottom .ul1 li:nth-child(1) {
      color: white;
    }

    .bottom .ul2 {
      margin-top: 21px;
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #828789;
    }

    .bottom .ul2 li {
      margin: 0 14px 11px 0;
      font-size: 12px;
    }

    .bottomcompany {
      position: relative;
      margin-top: 20px;
    }

    .bottomcompany ul {
      display: flex;
    }

    .bottomcompany ul li {
      margin-right: 17px;
      color: white;
    }

    .bottomcompany p {
      font-size: 12px;
      margin-top: 23px;
    }

    .bottomcompany p:last-child img {
      height: 21px;
      vertical-align: middle;
    }

    .bottomcompany p:last-child span {
      display: block;
    }

    .bottomcompany .box11 {
      position: absolute;
      right: 300px;
      bottom: 50px;
    }

    .bottomcompany .box22 {
      position: absolute;
      right: 150px;
      bottom: 50px;
    }

    .bottomcompany .box11 img,
    .bottomcompany .box11 {
      width: 100px;
      height: 100px;
    }

    .bottomcompany .box22 img,
    .bottomcompany .box22 {
      width: 100px;
      height: 100px;
    }

    .fixed {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 70px;
      background-color: #15161a;
      opacity: .9;
    }

    .fixed .img {
      width: 700px;
      margin: 0 auto;
    }

    .fixed .img {
      position: relative;
      height: 70px;
    }

    .img .newbottom {
      position: absolute;
      bottom: 0;
      left: 70px;
    }

    .img .newbottom img {
      height: 150px;
    }

    .img .newslide {
      position: absolute;
      right: -100px;
      width: 31px;
      height: 36px;
      top: 5px;
      background: url(images/new_bottom_slide_ud.png) no-repeat -1px -1px;
      animation: move1 .5s linear infinite alternate;
    }

    .fixright {
      position: fixed;
      z-index: 1000;
      right: 0;
      top: 200px;
      background-color: white;
    }

    .fixright ul li {
      width: 50px;
      height: 50px;
      background: url(images/service_l.png) no-repeat center center;
      background-position: -182px -453px;
      background-size: 800px 552px;
    }

    /*#endregion*/

    @keyframes move1 {
      from {}

      to {
        transform: translateY(-10px);
      }
    }
  </style>
</head>

<body>
  <!-- 顶部登录注册导航栏 -->
  <div class="headbox">
    <div class="headcontent">
      <!-- 城市信息 -->
      <div class="headcity">
        <img src="images/dizhi.png" alt="">
        郑州
        <span>[切换]</span>
      </div>
      <!-- 头部导航栏 -->
      <div class="headnav">
        <ul>
          <li class="li1">
            <a href="#">登录</a>
            <a href="#">注册</a>
          </li>

          <li>
            <a href="#">我的土巴兔<img src="images/下拉.png" alt="">
              <div>我的土巴兔</div>
            </a>
          </li>
          <li>
            <a href="#">商家中心<img src="images/下拉.png" alt="">
              <div>商家中心</div>
            </a>
          </li>
          <li>
            <a href="#">建材中心<img src="images/下拉.png" alt="">
              <div>建材中心</div>
            </a>
          </li>
          <li>
            <a href="#">创作者中心</a>
          </li>
          <li>
            <a href="#">图满意云设计</a>
          </li>
          <li>
            <a href="#">咨询热线：<span>4006-900-288</span></a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- logo位置导航栏 -->
  <div class="logonav">
    <div class="logonavcontent">
      <div class="logobox">
        <i></i>
        <img src="images/logo2.gif" alt="">
      </div>
      <div class="logonavmain">
        <ul>
          <li>
            <a href="#">首页</a>
          </li>
          <li>
            <a href="#">效果图<img src="images/下拉 (1).png" alt="">
              <div>效果图</div>
            </a>
          </li>
          <li>
            <a href="#">装修公司<img src="images/下拉 (1).png" alt="">
              <div>装修公司</div>
            </a>
          </li>
          <li>
            <a href="#">装修攻略<img src="images/下拉 (1).png" alt="">
              <div>装修攻略</div>
            </a>
          </li>
          <li>
            <a href="#">更多<img src="images/下拉 (1).png" alt="">
              <div>更多</div>
            </a>
          </li>
          <li>
            <a href="#">下载app<img src="images/手机.png" alt=""></a>
          </li>
        </ul>
      </div>
      <div class="logosearch">
        <input type="text" placeholder="搜装修公司" class="text">
        <img src="images/搜索.png" alt="">
      </div>
    </div>
  </div>

  <!-- 轮播图模块 -->
  <div class="swiper">
    <div class="swiperimg">
      <a href=""><img class="imgg" src="images/swiper1.jpg" alt=""></a>
      <a href=""><img src="images/swiper2.jpg" alt=""></a>
      <a href=""><img class="imgg" src="images/swiper1.jpg" alt=""></a>
      <!-- <img src="images/swiper2.jpg" alt="">
      <img src="images/swiper1.jpg" alt=""> -->
    </div>
    <!-- 登录区域 -->
    <div class="login">
      <h3>装修选半包还是全包好？</h3>
      <p>10秒估算一下</p>
      <div class="unit">
        <input type="text" placeholder="输入房屋的面积" name="" id="">
        <span>m<sup>2</sup></span>
      </div>
      <div class="unit">
        <input type="text" placeholder="输入手机号获取报价结果" name="" id="">
      </div>
      <div class="agree">
        <input type="checkbox" name="" id="">
        我已阅读并接受《隐私政策》《服务条款》
      </div>
      <a class="getprice" href="#">获取报价</a>
      <p class="wran">报价后将会有装修顾问致电为您解读报价</p>
    </div>
  </div>

  <!-- 展示功能区域 -->
  <div class="showfunction">
    <ul class="showlist">
      <li>
        <a href="#">
          <span>
            <h5>免费设计</h5>
            <p>获取三份设计方案</p>
          </span>
          <div class="showright">
            <img src="images/showimg1.jpg" alt="">
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <span>
            <h5>免费设计</h5>
            <p>获取三份设计方案</p>
          </span>
          <div class="showright">
            <img src="images/showimg1.jpg" alt="">
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <span>
            <h5>免费设计</h5>
            <p>获取三份设计方案</p>
          </span>
          <div class="showright">
            <img src="images/showimg1.jpg" alt="">
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <span>
            <h5>免费设计</h5>
            <p>获取三份设计方案</p>
          </span>
          <div class="showright">
            <img src="images/showimg1.jpg" alt="">
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <span>
            <h5>免费设计</h5>
            <p>获取三份设计方案</p>
          </span>
          <div class="showright">
            <img src="images/showimg1.jpg" alt="">
          </div>
        </a>
      </li>
    </ul>
  </div>

  <!-- 公司展示 -->
  <div class="showcompanybig">
    <div class="showcompany">
      <div class="showcompanytitle">
        <h2>郑州装修公司</h2>
        <div>
          <span>小编推荐</span>
          <span>优选公司</span>
        </div>
      </div>
      <div class="showcompanylist">
        <div class="showcompanyitem">
          <div class="companyimg">
          </div>
          <div class="companycontent">
            <h2>小龙在郑州遍布每个角落<span>礼</span><span>券</span></h2>
            <p><img src="images/star.png" alt="">&#x3000;2996条评论</p>
          </div>
        </div>
        <div class="showcompanyitem">
          <div class="companyimg">
          </div>
          <div class="companycontent">
            <h2>小龙在郑州遍布每个角落<span>礼</span><span>券</span></h2>
            <p><img src="images/star.png" alt="">&#x3000;2996条评论</p>
          </div>
        </div>
        <div class="showcompanyitem">
          <div class="companyimg">
          </div>
          <div class="companycontent">
            <h2>小龙在郑州遍布每个角落<span>礼</span><span>券</span></h2>
            <p><img src="images/star.png" alt="">&#x3000;2996条评论</p>
          </div>
        </div>
        <div class="showcompanyitem">
          <div class="companyimg">
          </div>
          <div class="companycontent">
            <h2>小龙在郑州遍布每个角落<span>礼</span><span>券</span></h2>
            <p><img src="images/star.png" alt="">&#x3000;2996条评论</p>
          </div>
        </div>
        <div class="showcompanyitem">
          <div class="companyimg">
          </div>
          <div class="companycontent">
            <h2>小龙在郑州遍布每个角落<span>礼</span><span>券</span></h2>
            <p><img src="images/star.png" alt="">&#x3000;2996条评论</p>
          </div>
        </div>
        <div class="showcompanyitem">
          <div class="companyimg">
          </div>
          <div class="companycontent">
            <h2>小龙在郑州遍布每个角落<span>礼</span><span>券</span></h2>
            <p><img src="images/star.png" alt="">&#x3000;2996条评论</p>
          </div>
        </div>
        <div class="showcompanyitem">
          <div class="companyimg">
          </div>
          <div class="companycontent">
            <h2>小龙在郑州遍布每个角落<span>礼</span><span>券</span></h2>
            <p><img src="images/star.png" alt="">&#x3000;2996条评论</p>
          </div>
        </div>
        <div class="showcompanyitem">
          <div class="companyimg">
          </div>
          <div class="companycontent">
            <h2>小龙在郑州遍布每个角落<span>礼</span><span>券</span></h2>
            <p><img src="images/star.png" alt="">&#x3000;2996条评论</p>
          </div>
        </div>
      </div>
      <a class="morecompany" href="javascript:void(0)">查看更多装修公司</a>
    </div>
  </div>

  <!-- 用户装修评价 -->
  <div class="evaluation">
    <div class="bgimgleft">
      <img src="images/yzs_bg.jpg" alt="">

    </div>
    <div class="bgimgright">
      <img src="images/yzs_bg_right.png" alt="">
      <div class="rightnode">
        <h6>装修日记</h6>
        <p>业主分享装修历程，还原线下装修体验</p>
        <p>拆解郑州装修公司服务口碑</p>
        <ul>
          <li>
            <img src="images/touxiang1.jpg" alt="">
          </li>
          <li>
            <img src="images/touxiang2.jpg" alt="">
          </li>
          <li>
            <img src="images/touxiang3.jpg" alt="">
          </li>
          <li>
            <img src="images/touxiang4.jpg" alt="">
          </li>
          <li>
            <img src="images/touxiang3.jpg" alt="">
          </li>
          <li>
            <img src="images/touxiang4.jpg" alt="">
          </li>
          <li>
            <img src="images/touxiang2.jpg" alt="">
          </li>
          <li>
            <img src="images/touxiang1.jpg" alt="">
          </li>
          <li>
            <img src="images/touxiang4.jpg" alt="">
          </li>
          <li>
            <img src="images/touxiang2.jpg" alt="">
          </li>
          <li>
            <img src="images/touxiang1.jpg" alt="">
          </li>
          <li>
            <img src="images/touxiang3.jpg" alt="">
          </li>
        </ul>
      </div>
    </div>
    <div class="evaluationcontent">
      <a class="usercontentinfo" href="#">
        <div class="userinfo">
          <img src="images/touxiang1.jpg" alt="">
          <p>芜湖情场</p>
          <p>简约</p>
        </div>
        <p class="usercommentcontent">
          1.12号完成的柜子是这样的，今天1.13也不知道木工师傅有没有把柜子外边改包的再包下，接下来就要开始油漆啦，快过年了，住不了新家了
          之前泥工验收的时候还有一些地砖空鼓的，装修经理说泥瓦工师傅明天会过去修补，期待一下，还得记住之前验收的时候...
        </p>
        <div class="commentimgbox"><img src="images/userimg1.jpg" alt=""><img src="images/userimg2.jpg" alt=""></div>
      </a>
    </div>
  </div>


  <!-- 服务流程 -->
  <div class="serviceprocess">
    <div class="serviceprocesstop">
      <h4>服务流程</h4>
      <div class="processlistbox">
        <ul class="processlist">
          <li>
            <i></i>
            <p>在线预约</p>
            <p>登记联系方式</p>
          </li>
          <li>
            <i></i>
            <p>量房沟通</p>
            <p>装修公司免费量房</p>
          </li>
          <li><i></i>
            <p>在线预约</p>
            <p>登记联系方式</p>
          </li>
          <li><i></i>
            <p>量房沟通</p>
            <p>装修公司免费量房</p>
          </li>
          <li><i></i>
            <p>在线预约</p>
            <p>登记联系方式</p>
          </li>
          </li>
          <li><i></i>
            <p>量房沟通</p>
            <p>装修公司免费量房</p>
          </li>
          </li>
          <li><i></i>
            <p>在线预约</p>
            <p>登记联系方式</p>
          </li>
          </li>
        </ul>
        <div class="step">
          <div class="stepimg">
            <i><span>1</span></i>
            <span></span>
          </div>
          <div class="stepimg">
            <i><span>2</span></i>
            <span></span>
          </div>
          <div class="stepimg">
            <i><span>3</span></i>
            <span></span>
          </div>
          <div class="stepimg">
            <i><span>4</span></i>
            <span></span>
          </div>
          <div class="stepimg">
            <i><span>5</span></i>
            <span></span>
          </div>
          <div class="stepimg">
            <i><span>6</span></i>
            <span></span>
          </div>
          <div class="stepimg">
            <i><span>7</span></i>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 装修效果图 -->
  <div class="render">
    <div class="renderhead">
      <h4>郑州装修效果图</h4>
      <span></span>
      <span></span>
      <p>搜索海量郑州装修家居美图，发现新家装修灵感</p>
    </div>
    <ul class="navbar">
      <li>
        <a href="">现代简约</a>
        <span>/</span>
      </li>
      <li><a href="">现代简约</a>
        <span>/</span>
      </li>
      <li><a href="">现代简约</a>
        <span>/</span>
      </li>
      <li><a href="">现代简约</a>
        <span>/</span>
      </li>
      <li><a href="">现代简约</a>
        <span>/</span>
      </li>
      <li><a href="">现代简约</a>
        <span>></span>
      </li>
    </ul>
    <div class="renderimglist">
      <div class="item renderimgitem">
        <img src="images/renderimg1.jpeg" alt="">
      </div>
      <div class="item renderimgitem1">
        <img src="images/renderimg2.jpeg" alt="">
      </div>
      <div class="item renderimgitem2">
        <img src="images/renderimg3.jpeg" alt="">
      </div>
      <div class="item renderimgitem3">
        <img src="images/renderimg4.jpeg" alt="">
      </div>
      <div class="item renderimgitem4">
        <img src="images/renderimg5.jpeg" alt="">
      </div>
      <div class="item renderimgitem5">
        <img src="images/renderimg6.jpeg" alt="">
      </div>
    </div>
  </div>

  <!-- 看 攻略 -->
  <div class="strategy">
    <div class="strategyhead">
      <h4>看攻略</h4>
      <span></span>
      <span></span>
      <p>学习装修经验与交流郑州装修相关问题，小白晋级达人就靠它</p>
    </div>
    <div class="strategycontent">
      <div class="strategyitem">
        <div class="itemtop">
          <span><i></i>郑州装修攻略</span>
        </div>
        <ul>
          <li>家里装修担心家居环境不...</li>
          <li>包头墙面刮腻子价格多少？刮腻子施工的工序是什么</li>
          <li>包头墙面刮腻子程序如何 刮腻子和刮大白的区别</li>
          <li>墙面腻子材料重要吗 墙面怎么刮腻子</li>
          <li>刮完腻子多久可入住 刷白墙的涂料含甲醛吗</li>
          <li>2020年旧房墙面翻新的步骤是什么</li>
        </ul>
        <span class="yjt"></span>
      </div>
      <div class="strategyitem">
        <div class="itemtop">
          <span><i></i>郑州装修攻略</span>
        </div>
        <ul>
          <li>家里装修担心家居环境不...</li>
          <li>包头墙面刮腻子价格多少？刮腻子施工的工序是什么</li>
          <li>包头墙面刮腻子程序如何 刮腻子和刮大白的区别</li>
          <li>墙面腻子材料重要吗 墙面怎么刮腻子</li>
          <li>刮完腻子多久可入住 刷白墙的涂料含甲醛吗</li>
          <li>2020年旧房墙面翻新的步骤是什么</li>
        </ul>
        <span class="yjt"></span>
      </div>
      <div class="strategyitem">
        <div class="itemtop">
          <span><i></i>郑州装修攻略</span>
        </div>
        <ul>
          <li>家里装修担心家居环境不...</li>
          <li>包头墙面刮腻子价格多少？刮腻子施工的工序是什么</li>
          <li>包头墙面刮腻子程序如何 刮腻子和刮大白的区别</li>
          <li>墙面腻子材料重要吗 墙面怎么刮腻子</li>
          <li>刮完腻子多久可入住 刷白墙的涂料含甲醛吗</li>
          <li>2020年旧房墙面翻新的步骤是什么</li>
        </ul>
        <span class="yjt"></span>
      </div>
      <div class="strategyitem">
        <div class="itemtop">
          <span><i></i>郑州装修攻略</span>
        </div>
        <ul>
          <li>家里装修担心家居环境不...</li>
          <li>包头墙面刮腻子价格多少？刮腻子施工的工序是什么</li>
          <li>包头墙面刮腻子程序如何 刮腻子和刮大白的区别</li>
          <li>墙面腻子材料重要吗 墙面怎么刮腻子</li>
          <li>刮完腻子多久可入住 刷白墙的涂料含甲醛吗</li>
          <li>2020年旧房墙面翻新的步骤是什么</li>
        </ul>
        <span class="yjt"></span>
      </div>
    </div>
  </div>

  <!-- 习惯 -->
  <div class="rabbit">
    <img src="images/rabbit.jpg" alt="">
  </div>

  <!-- 找建材 -->
  <div class="render">
    <div class="renderhead">
      <h4>找建材</h4>
      <span></span>
      <span></span>
      <p>线上超值低价，线下品质服务</p>
    </div>
    <ul class="navbar">
      <li>
        <a href="">油漆涂料</a>
        <span>/</span>
      </li>
      <li><a href="">瓷砖</a>
        <span>/</span>
      </li>
      <li><a href="">地板</a>
        <span>/</span>
      </li>
      <li><a href="">衣柜</a>
        <span>/</span>
      </li>
      <li><a href="">橱柜</a>
        <span>/</span>
      </li>
      <li><a href="">全部分类</a>
        <span>></span>
      </li>
    </ul>
    <div class="jiancailist">
      <div class="jiancaiitem">
        <h4>全屋定制</h4>
        <p>空间省心定制，优惠商家严选</p>
      </div>
      <div class="jiancaiitem">
        <h4>全屋定制</h4>
        <p>空间省心定制，优惠商家严选</p>
      </div>
      <div class="jiancaiitem2">
        <div><span>成品家具</span></div>
        <div><span>成品家具</span></div>
      </div>
    </div>
  </div>

  <div class="logolist">
    <ul>
      <li><img src="images/logolist1.png" alt=""><span></span></li>
      <li><img src="images/logolist2.jpg" alt=""><span></span></li>
    </ul>
  </div>

  <div class="bottombg">
    <div class="bottomcontent">
      <img src="images/people.png" alt="">
      <div class="text">
        <p>土巴兔专注装修13年</p>
        <p>始 终 为 用 户 创 造 价 值</p>
      </div>
      <div class="bottomright">
        <img src="images/bottomimg.png" alt="">
      </div>
    </div>
  </div>

  <div class="bottom">
    <div class="bottommain">
      <ul class="ul1">
        <li>友情链接</li>
        <li>装修美图</li>
        <li>热门公司</li>
        <li>热门攻略</li>
        <li>热门专题</li>
        <li>热门城市</li>
        <li>附近城市</li>
      </ul>
      <ul class="ul2">
        <li>郑州新房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州新房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州新房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
      </ul>
    </div>
    <div class="bottomcompany">
      <ul>
        <li>关于我们</li>
        <li>关于我们</li>
        <li>关于我们</li>
        <li>关于我们</li>
        <li>关于我们</li>
      </ul>
      <p>免责声明：本网站部分内容由用户自行上传，如权利人发现存在误传其作品情形，请及时与本站联系。© 2008-现在 Tubatu.com 土巴兔装修网和设计师社区 保留所有权利</p>
      <p>土巴兔装修网&#x3000;&#x3000;增值电信业务许可证：合字B2-20200129</p>
      <p><img src="images/footer_110.png" alt=""> 粤公网安备 44030502001463号<img src="images/bottomlast.png" alt=""></p>
      <div class="box11"><img src="images/t8t_app.jpg" alt=""></div>
      <div class="box22"><img src="images/t8t1.jpg" alt=""></div>

    </div>
  </div>

  <div class="fixed">
    <div class="img">
      <img src="images/fixed.png" alt="">
      <div class="newbottom">
        <img src="images/new_bottom_wh_img.gif" alt="">
      </div>
      <div class="newslide">

      </div>
    </div>
  </div>

  <div class="fixright">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <script>
    var bgcimg = document.querySelectorAll('.companyimg')
    for (var i = 0; i < bgcimg.length; i++) {
      bgcimg[i].style.backgroundImage = 'url(images/companylist' + (i + 1) + '.jpg)'
    }
  </script>
</body>

</html>